<extend name="Layout/application"/>

<block name="css">
   <style>
      .box-body {
         display: inline-block;
      }

      .image {
         width: 150px;
         height: 200px;
         margin: 5px;
      }

      .form-footer {
         text-align: center;
      }

      .edit {
         width: 110px;
         border: none;
      }

   </style>
</block>

<block name="content">
   <section class="content-header">
      <h1>
         相册管理
         <small>Photo index</small>
      </h1>
      <ol class="breadcrumb">
         <li><a href="#"><i class="fa fa-dashboard"></i> Photo</a></li>
         <li class="active">Index</li>
      </ol>
   </section>

   <section class="content">

      <include file="Layout/_flash"/>

      <div class="row">
         <div class="col-xs-12">
            <div class="box">
               <div class="box-header">
                  <a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新"><i
                        class="fa fa-refresh"></i></a>
                  <a href="/admin/galleries/create" class="btn btn-success btn-add" title="添加"><i
                        class="fa fa-plus"></i>
                     添加</a>
                  <a href="javascript:;" class="btn btn-danger btn-del delete_all" title="删除"><i
                        class="fa fa-trash"></i> 删除</a>
               </div>
               <!-- /.box-header -->
               <div class="box-body" style="width: 100%;">
                  <div class="nav-tabs-custom">
                     <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">客片列表</a></li>
                        <li><a href="#tab2" data-toggle="tab">样片列表</a></li>
                        <li class="pull-right"><a href="javascript:history.back(-1)" class="btn btn-sm"
                                                  style="padding:10px 2px;"><i class="fa fa-list"></i> 返回</a></li>
                     </ul>
                     <div class="tab-content">
                        <div class="tab-pane active" id="tab1">

                           <volist name="kepians" id="kepian">
                              <div class="box-body btn">
                                 <div class="form-group">
                                    <img class="image" src="{{$kepian.img}}" alt="{{$kepian.title}}">
                                 </div>
                                 <div class="form-footer">
                                    <input type="checkbox" class="minimal-blue checked_id" name="check_id[]"
                                           value="{{$kepian.id}}">
                                    <input type="text" data-id="{{$kepian.id}}" name="title" value="{{$kepian.title}}"
                                           class="edit">
                                 </div>
                              </div>
                           </volist>

                           <div class="box-footer">
                              共 {{$kepians->total()}} 张客片
                              <div class="page">
                                 {{$kepians->render()|raw}}
                              </div>
                           </div>
                        </div>

                        <div class="tab-pane" id="tab2">

                           <volist name="yangpians" id="yangpian">
                              <div class="box-body btn">
                                 <div class="form-group">
                                    <img class="image" src="{{$yangpian.img}}" alt="{{$yangpian.title}}">
                                 </div>
                                 <div class="form-footer">
                                    <input type="checkbox" class="minimal-blue checked_id" name="check_id[]"
                                           value="{{$yangpian.id}}">
                                    <input type="text" data-id="{{$yangpian.id}}" name="title"
                                           value="{{$yangpian.title}}" class="edit">
                                 </div>
                              </div>
                           </volist>

                           <div class="box-footer">
                              共 {{$yangpians->total()}} 张样片
                              <div class="page">
                                 {{$yangpians->render()|raw}}
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- /.box-body -->
               </div>
               <!-- /.box -->
            </div>
            <!-- /.col -->
         </div>
      </div>
      <!-- /.row -->
   </section>
</block>

<block name="js">
   <script>
      $(function () {
         //刷新
         $('.btn-refresh').click(function () {
            window.location.reload();
         });

         //编辑
         $('.edit').change(function () {
            var info = {
               id: $(this).data('id'),
               title: $(this).val(),
            };
            layer.confirm('确认更新名称吗?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     url: '/admin/galleries/update',
                     data: info,
                     type: 'POST',
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           // window.location.reload();
                        }
                     }
                  })
               });
            return false;
         });

         //多选删除
         $('.delete_all').click(function () {
            var check_length = $('.checked_id:checked').length;
            if (check_length == 0) {
               layer.msg('请你至少选中一条', {icon: 2, offset: 't'});
               return false;
            }

            layer.confirm('确认删除吗?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     type: 'DELETE',
                     url: '/admin/galleries/delete_all',
                     data: $('.checked_id:checked').serialize(),
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           $('.checked_id:checked').parents('.btn').fadeOut(400);
                        }
                     }
                  });
               });
            return false;
         });

      })
   </script>
</block>


